<template>
  <div class="page-wrapper">
    <c-box class="box" title="不分行业">
      <c-circle-label score="98"></c-circle-label>
      <div id="echart-1" class="echart"></div>
      <div id="echart-2" class="echart"></div>
      <div id="echart-3" class="echart"></div>
    </c-box>
    <c-box class="box" title="分行业">
      <c-circle-label score="78" color="#a05ae9"></c-circle-label>
      <div id="echart-4" class="echart"></div>
      <div id="echart-5" class="echart"></div>
      <div id="echart-6" class="echart"></div>
    </c-box>
    <c-box class="box" title="聚类后工业类">
      <c-circle-label score="85" color="#f4a637"></c-circle-label>
      <div id="echart-7" class="echart"></div>
      <div id="echart-8" class="echart"></div>
      <div id="echart-9" class="echart"></div>
    </c-box>
  </div>
</template>

<script>
import echarts from "echarts";
import CBox from "@/components/PageCard";
import CCircleLabel from "./components/CCircleLabel";
import { textColor } from "@/utils/echarts";
const priColor = "#2AAEF2";
export default {
  components: {
    CBox,
    CCircleLabel
  },
  created() {},
  mounted() {
    this.echart1 = echarts.init(document.getElementById("echart-1"));
    this.echart2 = echarts.init(document.getElementById("echart-2"));
    this.echart3 = echarts.init(document.getElementById("echart-3"));
    this.echart4 = echarts.init(document.getElementById("echart-4"));
    this.echart5 = echarts.init(document.getElementById("echart-5"));
    this.echart6 = echarts.init(document.getElementById("echart-6"));
    this.echart7 = echarts.init(document.getElementById("echart-7"));
    this.echart8 = echarts.init(document.getElementById("echart-8"));
    this.echart9 = echarts.init(document.getElementById("echart-9"));
    this.setOption1();
    this.setOption2();
    this.setOption3();
    this.setOption4();
    this.setOption5();
    this.setOption6();
    this.setOption7();
    this.setOption8();
    this.setOption9();
  },
  methods: {
    setOption1() {
      const cstart = "#BACDF0",
        cend = "#1657E9",
        mData = [
          {
            name: "中",
            xAxis: 800
          },
          {
            name: "良",
            xAxis: 1000,
            lineStyle: {
              color: "#FFFF00"
            }
          }
        ];
      const data = [
          { name: "观音桥", value: 98 },
          { name: "观音桥", value: 87 },
          { name: "观音桥", value: 76 },
          { name: "观音桥", value: 65 },
          { name: "观音桥", value: 54 },
          {
            name: "观音桥",
            value: 79,
            itemStyle: {
              normal: {
                color: "#0B923B"
              },
              emphasis: {
                color: "#0b523b"
              }
            }
          }
        ],
        xData = ["第一名", "第二名", "第三名", "第四名", "第五名", "我"];
      data.reverse();
      xData.reverse();
      const option = {
        textStyle: {
          color: priColor
        },
        title: {
          show: false
        },
        tooltip: {},
        legend: {
          show: false
        },
        grid: {
          left: "15%",
          right: "8%",
          bottom: "18%",
          top: "10%"
        },
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisLabel: {
            rotate: -45
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisTick: {
            show: false
          }
        },
        series: {
          name: "当前分数",
          type: "bar",
          barWidth: 10,
          label: {
            show: true,
            position: "inside",
            color: textColor,
            formatter: ({ data }) => {
              return `${data.name} - ${data.value}`;
            }
          },
          markLine: {
            lineStyle: {
              color: priColor
            },
            data: mData
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: cstart },
                { offset: 1, color: cend }
              ])
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: cend },
                { offset: 1, color: cstart }
              ])
            }
          },
          data: data
        }
      };
      this.echart1.setOption(option);
    },
    setOption4() {
      const cstart = "#e2c3f3",
        cend = "#6f17ad",
        mData = [
          {
            name: "中",
            xAxis: 800
          },
          {
            name: "良",
            xAxis: 1000,
            lineStyle: {
              color: "#FFFF00"
            }
          }
        ];
      const data = [
          { name: "观音桥", value: 98 },
          { name: "观音桥", value: 80 },
          { name: "观音桥", value: 76 },
          { name: "观音桥", value: 60 },
          { name: "观音桥", value: 54 },
          {
            name: "观音桥",
            value: 79,
            itemStyle: {
              normal: {
                color: "#e9c727"
              },
              emphasis: {
                color: "#f7d94d"
              }
            }
          }
        ],
        xData = ["第一名", "第二名", "第三名", "第四名", "第五名", "我"];
      data.reverse();
      xData.reverse();
      const option = {
        textStyle: {
          color: priColor
        },
        title: {
          show: false
        },
        tooltip: {},
        legend: {
          show: false
        },
        grid: {
          left: "15%",
          right: "8%",
          bottom: "18%",
          top: "10%"
        },
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisLabel: {
            rotate: -45
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisTick: {
            show: false
          }
        },
        series: {
          name: "当前分数",
          type: "bar",
          barWidth: 10,
          label: {
            show: true,
            position: "inside",
            color: textColor,
            formatter: ({ data }) => {
              return `${data.name} - ${data.value}`;
            }
          },
          markLine: {
            lineStyle: {
              color: priColor
            },
            data: mData
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: cstart },
                { offset: 1, color: cend }
              ])
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: cend },
                { offset: 1, color: cstart }
              ])
            }
          },
          data: data
        }
      };
      this.echart4.setOption(option);
    },
    setOption7() {
      const cstart = "#b4fea7",
        cend = "#409133",
        mData = [
          {
            name: "中",
            xAxis: 800
          },
          {
            name: "良",
            xAxis: 1000,
            lineStyle: {
              color: "#FFFF00"
            }
          }
        ];
      const data = [
          { name: "观音桥", value: 98 },
          { name: "观音桥", value: 97 },
          { name: "观音桥", value: 95 },
          { name: "观音桥", value: 94 },
          { name: "观音桥", value: 54 },
          {
            name: "观音桥",
            value: 49,
            itemStyle: {
              normal: {
                color: "#e9c727"
              },
              emphasis: {
                color: "#f7d94d"
              }
            }
          }
        ],
        xData = ["第一名", "第二名", "第三名", "第四名", "第五名", "我"];
      data.reverse();
      xData.reverse();
      const option = {
        textStyle: {
          color: priColor
        },
        title: {
          show: false
        },
        tooltip: {},
        legend: {
          show: false
        },
        grid: {
          left: "15%",
          right: "8%",
          bottom: "18%",
          top: "10%"
        },
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisLabel: {
            rotate: -45
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisTick: {
            show: false
          }
        },
        series: {
          name: "当前分数",
          type: "bar",
          barWidth: 10,
          label: {
            show: true,
            position: "inside",
            color: textColor,
            formatter: ({ data }) => {
              return `${data.name} - ${data.value}`;
            }
          },
          markLine: {
            lineStyle: {
              color: priColor
            },
            data: mData
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: cstart },
                { offset: 1, color: cend }
              ])
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: cend },
                { offset: 1, color: cstart }
              ])
            }
          },
          data: data
        }
      };
      this.echart7.setOption(option);
    },
    setOption2() {
      const option = {
        lineStyle: {
          color: "#81f67b"
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["0.5", "1", "1.5", "2", "2.5", "3", "3.5"]
        },
        axisLabel: { color: textColor },
        yAxis: {
          splitLine: {
            show: false
          },
          textStyle: {
            color: textColor
          },
          type: "value"
        },
        series: [
          {
            data: [2, 5, 8, 8, 6, 4, 5],
            type: "line",
            smooth: true
          }
        ]
      };
      this.echart2.setOption(option);
    },
    setOption5() {
      const option = {
        lineStyle: {
          color: "#3f82f0"
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        axisLabel: { color: textColor },
        yAxis: {
          splitLine: {
            show: false
          },
          textStyle: {
            color: textColor
          },
          type: "value"
        },
        series: [
          {
            data: [820, 632, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true
          }
        ]
      };
      this.echart5.setOption(option);
    },
    setOption8() {
      const option = {
        lineStyle: {
          color: "#3eede3"
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        axisLabel: { color: textColor },
        yAxis: {
          splitLine: {
            show: false
          },
          textStyle: {
            color: textColor
          },
          type: "value"
        },
        series: [
          {
            data: [820, 632, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true
          }
        ]
      };
      this.echart8.setOption(option);
    },
    setOption3() {
      const option = {
        axisLabel: { color: textColor },
        lineStyle: {
          color: "#7722f6"
        },
        tooltip: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          splitLine: {
            show: false
          },
          textStyle: {
            color: textColor
          },
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      this.echart3.setOption(option);
    },
    setOption6() {
      const option = {
        axisLabel: { color: textColor },
        lineStyle: {
          color: "#7722f6"
        },
        tooltip: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          splitLine: {
            show: false
          },
          textStyle: {
            color: textColor
          },
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      this.echart6.setOption(option);
    },
    setOption9() {
      const option = {
        axisLabel: { color: textColor },
        lineStyle: {
          color: "#e9e75a"
        },
        tooltip: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          splitLine: {
            show: false
          },
          textStyle: {
            color: textColor
          },
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      this.echart9.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  color: #2aaef2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-gap: 10px;
  /deep/ .box .card-container {
    display: flex;
    flex-direction: column;
    padding: 14px 20px;
  }
  .echart {
    flex: 1;
  }
}
</style>
